<template>
    <div id="split"></div>
</template>

<script>
    export default {
        name: 'Split'
    }
</script>

<style scoped>
    #split {
        width: 100%;
        height: 16px;
        background-color: #f3f5f7;
        position: relative;
    }

    #split::before, 
    #split::after {
        content: '';
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        border-top: 1px solid rgba(7, 17, 27, .1);
    }

    #split::before {
        top: 0;
    }

    #split::after {
        bottom: 0;
    }

    @media (min-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5){
        #split::before, 
        #split::after {
            transform: scaleY(.7);
        }
    }

    @media (min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2){
        #split::before, 
        #split::after {
            transform: scaleY(.5);
        }
    }
</style>